﻿<!DOCTYPE HTML>
<html lang="en-US">
  <head>    
    <meta charset="UTF-8" />
    <title>DJ JUNCAL</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="css/bootstrap.css" rel="stylesheet" />
	
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="fullcalendar/fullcalendar.css" />
    <link rel="stylesheet" type="text/css" href="fullcalendar/fullcalendar.print.css" media="print" />
    
    <!--<script type="text/javascript" src="jquery/jquery-ui-1.8.23.custom.min.js"></script>-->
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="fullcalendar/gcal.js"></script>
    <script type="text/javascript" src="js/jquery.quovolver.js"></script>
	<link rel="stylesheet/less" href="css/carterstyle.less" />
	<script type="text/javascript" src="js/less-1.3.3.min.js"></script>
    <style type="text/css">

	</style>
	
  </head>
<body>
    <div class="container-fluid" style="height:100%;margin:0;padding:0;">
	<div class="row-fluid" style="height:100%">

		<div class="span8 offset4" style="padding-top:30px;padding-bottom:30px;">
		<div class="row-fluid">
			<div class="span12">
				<div class="carousel-wrapper">
						  <div id="myCarousel" class="carousel slide">
						
						  <div class="carousel-inner">
						    <div class="item active"><img class="img-polaroid" style="box-shadow:0 0 10px #000" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/485031_433378363378447_1092116242_n.jpg"></div>
						  </div>
						  <!-- Carousel nav -->
						  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
						  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
						  </div>
				</div>
			</div>
		</div>
		<div class="row-fluid">
		<div class="span6" style="padding-top:50px">
		<iframe style="box-shadow:0 0 15px #000" width="100%" height="450" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fusers%2F1626230"></iframe>
		</div>
		<div class="span6" style="padding-top:50px">
		<a class="twitter-timeline" href="https://twitter.com/djjuncal" data-widget-id="295108368333414400">Tweets by @djjuncal</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>
		</div>

		</div>
		<div id="sidebar" class="span4" style="">
			<div class="row-fluid">
			<div class="span1">
			<div class="icon-nav" style="position:absolute;top:50%;margin-top:-111px;">
			<h1>
			<i class="icon-home"></i>
			</h1>
			<h1><i class="icon-music"></i></h1>
			<h1><i class="icon-heart"></i></h1>
			<h1><i class="icon-comment"></i></h1>
			</div>
			</div>
			<div class="span11 offset1">
			<div class="row-fluid">
			<div class="span12">
			<h1><span class="themed">DJ</span> JUNC∆L</h1>
			<p class="muted">Carter Juncal creates a fun, energetic environment for parties with his selection of relevant music and the latest remixes.</p>
			<h3><i class="icon-user"></i> <span class="themed">ABOUT</span> ME</h3>
			<h3><i class="icon-envelope-alt"></i> <span class="themed">CONTACT</span> ME</h3>
			<p class="muted">For booking details email <a href="mailto:carterjuncal@gmail.com">carterjuncal@gmail.com</a></p>
			</div>
			</div>
			</div>
			</div>
			<div id="expand" class="btn btn-inverse engage">
			
			</div>
		</div>
	</div>
	</div>
		<script type="text/javascript">
	$(document).ready(function() {$("#expand").on("click",function() {
	$('#sidebar').toggleClass('span4 span12');
	$('#expand').toggleClass('engage disengage');
	console.log('wf');
	}	
	);
	});
	</script>
</body>
</html>